<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <div th:replace="~{common/baseMeta::header}"></div>
    <meta charset="UTF-8">
    <title>通用文件上传</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script type="text/javascript">

        function clearall() {
            var index = parent.layer.getFrameIndex(window.name); //获取当前窗体索引
            parent.layer.close(index); //执行关闭
        }
        function btnclose() {
            closeIndexWindwos();
        }

        $(function () {
            var height = findDimensions_height();
        });

        function validateForm(){
            return true;
        }

        function saveFile() {
            if($('.progress-bar').text()!='保存成功'){
                layerInfo('文件未上传完成.');
                return;
            }
            var WinID='[(${paramMap.WinID})]';
            if(WinID!=''){
                var iframeWin = parent.document.getElementById('layui-layer-iframe'+WinID);
                iframeWin&&iframeWin.contentWindow&&iframeWin.contentWindow.setFileFieldValue&&iframeWin.contentWindow.setFileFieldValue("[(${fileFieldId})]",$('#uploadFileUrl').val(),$('#filenamesOrg').val());
                clearall();
                return;
            }
            parent.setFileFieldValue&&parent.setFileFieldValue("[(${fileFieldId})]",$('#uploadFileUrl').val(),$('#filenamesOrg').val());
            clearall();
        }

        function uploadFinish(e){
            var data= JSON.parse(e.target.responseText);
            if(data.success){
                $('#uploadFileUrl').val(unescape(data.filename));
                $('#filenamesOrg').val(unescape(data.filenamesOrg));
                $('.progress-bar').text('保存成功');
            }else{
                $('#uploadFileUrl').val(unescape(data.filename));
                $('#filenamesOrg').val(unescape(data.filenamesOrg));
                $('.progress-bar').text('上传失败,'+data.msg);
            }

        }

        function uploadProgress(e){
            var progress = parseInt(e.loaded / e.total * 100, 10);
            $('.progress-bar').css('width',progress + '%');
            $('.progress-bar').text(progress + '%');
            if(progress==100){
                $('.progress-bar').text(progress + '% 正在保存.');
            }
        }

        function comfirmUpload(){

//            //创建一个FileReader对象
//            var reader = new FileReader();
//            //绑定load事件当FileReader对象通过readAsDataURL读取数据成功后，就会触发load事件。target中的result属性的值，就是该文件的base64数据
//            reader.onload = function (e) {
//                var fd = new FormData();
//                fd.append("uploadfile", e.target.result);
//                var xhr = new XMLHttpRequest();
////                xhr.upload.addEventListener("progress", uploadProgress, false);
////                xhr.addEventListener("load", uploadFinish, false);
////                xhr.addEventListener("error", uploadFailed, false);
////                xhr.addEventListener("abort", uploadCanceled, false);
//                xhr.upload.onprogress = function (e) {
//                    console.log(e.loaded / e.total * 100);    // 上传进度
//                }
//                xhr.onprogress = function (e) {
//                    console.log(e.loaded / e.total * 100);    //  下载进度
//                }
//                xhr.open("POST", "/DevCommFileUpload");
//                xhr.send(fd);
//            }

           /**
           * 开始读取指定的Blob对象或File对象中的内容.
           * 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.
           * 同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.
           */
//           reader.readAsDataURL(document.getElementsByName('img')[0].files[0]);
            /**
             * * 同上, result属性中将包含一个字符串以表示所读取的文件内容.
             * encoding是可选项,类型为字符串,表示了返回数据所使用的编码.如果不指定,默认为UTF-8.
             * */
//            reader.readAsText(file["encoding"]);
            /**
             * * 同上, result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容.
             */
//            reader.readAsArrayBuffer(file);
            /**
             29  * 同上, result属性中将包含所读取文件的原始二进制数据.
             */
//            reader.readAsBinaryString(document.getElementsByName('img')[0].files[0]);


            var formData = new FormData();
            formData.append("uploadfiles",document.getElementsByName('uploadFile')[0].files[0]);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadFinish, false);
//                xhr.addEventListener("error", uploadFailed, false);
//                xhr.addEventListener("abort", uploadCanceled, false);
            xhr.upload.onprogress = function (e) {
                console.log(e.loaded / e.total * 100);    // 上传进度
            }
            xhr.onprogress = function (e) {
                console.log(e.loaded / e.total * 100);    //  下载进度
            }
            xhr.open("POST", "/DevCommFileUpload30");
            xhr.send(formData);
        }

    </script>

<body>
    <div class="container from-content" >
        <form method="post" id="commonFileUploadForm">
            <input type="hidden" name="uploadFileUrl" id="uploadFileUrl" value=""/>
            <input type="hidden" name="filenamesOrg" id="filenamesOrg" value=""/>
            <div class="div_border">
                <div class="div_h" style="margin-right:8px;">
                    <label for="img">上传文件:</label>
                    <input class="bi-width80 easyui-filebox" name="uploadFile" style="width: 160px;"
                           id="img" data-options="buttonText:'选择文件',prompt:'选择文件...',onChange:comfirmUpload"/>
                    <b class="redColor">*</b>
                </div>
            </div>
            <div class="div_border">
                <div class="div_h " style="margin-right:8px;">
                    <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;">0%</div>
                    </div>
                </div>
            </div>
            <button type="button" onclick="clearall()" class="btn btn-default  bi-btn bi-btn-width90"
                    name="closed" style="margin-left:35px;margin-right:95px;">取消
            </button>
            <button type="button" onclick="saveFile()"  class="btn btn-primary bi-btn bi-btn-width90" id="submit">保存</button>

        </form>

    </div>

</body>
</html>